import Vector2 from "../../src/maths/Vector2";
import TestApplication from "./TankMatrixApplication";
import Math2D from "../../src/maths/Math2D";
import Matrix2D from "../../src/maths/Matrix2D";

export default class Main {
    public canvas: HTMLCanvasElement;
    public context2D: CanvasRenderingContext2D;
    public app: TestApplication;

    protected _startAnchorPoint: Vector2;   // 起点，相当于p0点
    protected _endAnchorPoint: Vector2;     // 终点，相当于p2点
    protected _controlPoint0: Vector2;      // 控制点,相当于p1点

    protected _drawLine: boolean;   // 是否要绘制连线，方块表示的锚点和原点表示的控制点
    protected _lineColor: string;   // 绘制线段的颜色
    protected _lineWidth: number;   // 绘制的线宽
    protected _radiusOrLen: number; //方块表示的锚点和原点表示的控制点的大小
    protected _drawSteps: number;

    protected _points !: Array<Vector2>;

    public constructor() {
        this.canvas = document.getElementById('canvas') as HTMLCanvasElement;
        this.context2D = this.canvas.getContext('2d') as CanvasRenderingContext2D;
        this.app = new TestApplication(this.canvas);
        // this.app.start();

        // 初始化控制点
        this._startAnchorPoint = Vector2.create(400, 100);
        this._endAnchorPoint = Vector2.create(550, 200);
        this._controlPoint0 = Vector2.create(400, 300);
        this._drawSteps = 30;
        // 初始化渲染属性
        this._drawLine = true;
        this._lineColor = 'black';
        this._lineWidth = 1;
        this._radiusOrLen = 5;
        // this.draw(this.app);
    }

    public draw(app: TestApplication): void {
        if (this.context2D !== null) {
            this.context2D.save();
            this.context2D.lineWidth = this._lineWidth;
            this.context2D.strokeStyle = this._lineColor;

            this.context2D.beginPath();
            this.context2D.moveTo(this._points[0].x, this._points[0].y);
            this.context2D.quadraticCurveTo(this._controlPoint0.x, this._controlPoint0.y, this._endAnchorPoint.x, this._endAnchorPoint.y);
            this.context2D.stroke();

            if (this._drawLine) {
                app.strokeLine(this._startAnchorPoint.x, this._startAnchorPoint.y, this._controlPoint0.x, this._controlPoint0.y);
                app.strokeLine(this._endAnchorPoint.x, this._endAnchorPoint.y, this._controlPoint0.x, this._controlPoint0.y);
                app.fillRectWithTitle(this._startAnchorPoint.x - (this._radiusOrLen + 5) * 0.5,
                    this._startAnchorPoint.y - (this._radiusOrLen + 5) * 0.5,
                    this._radiusOrLen + 5, this._radiusOrLen + 5,
                    undefined, undefined, 'green', false);
                app.fillRectWithTitle(this._endAnchorPoint.x - (this._radiusOrLen + 5) * 0.5,
                    this._endAnchorPoint.y - (this._radiusOrLen + 5) * 0.5,
                    this._radiusOrLen + 5, this._radiusOrLen + 5,
                    undefined, undefined, 'blue', false);
                app.fillCircle(this._controlPoint0.x, this._controlPoint0.y, this._radiusOrLen);
            }
            app.drawCoordInfo('p0:' + this._startAnchorPoint.toString(), this._startAnchorPoint.x, this._startAnchorPoint.y - 10);
            app.drawCoordInfo('p1:' + this._controlPoint0.toString(), this._controlPoint0.x, this._controlPoint0.y - 10);
            app.drawCoordInfo('p2:' + this._endAnchorPoint.toString(), this._endAnchorPoint.x, this._endAnchorPoint.y - 10);
            this.context2D.restore();
        }
    }

    /* public test():void{
        // let T: Matrix2D = Matrix2D.makeTranslation(200, 100); // 生成一个tx = 100, ty = 200的平移矩阵
        // let v: Vector2 = Vector2.create(100, 200);  // 生成一个x = 100, y = 200的向量

        // let tv: Vector2 = Matrix2D.transform(T, v);
        // alert(tv);

        // 矩阵求逆
        // let invertT: Matrix2D = Matrix2D.create();   // 分配要计算的逆矩阵的内存
        // Matrix2D.invert(T, invertT); // 求T的逆矩阵invertT
        // v = Matrix2D.transform(invertT, tv);
        // alert(v);

        // 缩放矩阵
        // let S: Matrix2D = Matrix2D.makeScale(3, 0.5);   // 构造scale矩阵
        // let v: Vector2 = Vector2.create(100, 200);    // 创建[100,200]向量
        // 将向量v变换到S空间中
        // let tv: Vector2 = Matrix2D.transform(S, v);
        // alert(tv);

        // let invertS: Matrix2D = Matrix2D.create(); // 分配要计算的逆矩阵的内存
        // Matrix2D.invert(S, invertS); // 将T的逆矩阵invertT
        // v = Matrix2D.transform(invertS, tv);
        // alert(v);

        // 求旋转矩阵的逆矩阵测试代码
        // 创建一个顺时针旋转30度的旋转矩阵
        let R: Matrix2D = Matrix2D.makeRotation(Math2D.toRadian(30));
        // 创建一个变换前的向量v
        let v: Vector2 = Vector2.create(100, 200);
        // 将向量v变换为tv
        let tv: Vector2 = Matrix2D.transform(R, v);
        // 输出tv的数值,tv = [-13.3975,223.205]
        // alert(tv);
        // 第1种方式:使用相反的旋转角度构造旋转矩阵的逆矩阵
        let invertR: Matrix2D = Matrix2D.makeRotation(Math2D.toRadian(-30));
        // 将tv = [-13.3975,223.205]变换回原来的数值
        v = Matrix2D.transform(invertR, tv);
        // 此时v肯定是[100,200];
        // alert(v);

        // 第2种方式：使用通用的invert方法构造矩阵的逆矩阵
        let invertR2: Matrix2D = Matrix2D.create();
        Matrix2D.invert(R, invertR2);
        // 将tv = [-13.3975,223.205]变换回原来的数值
        v = Matrix2D.transform(invertR2, tv);
        // 此时v肯定是[100,200]
        // alert(v);

        // 第3种方式:转置方式构造矩阵的逆矩阵
        // 将旋转矩阵R复制到invertR2
        Matrix2D.copy(R, invertR2);
        // 在invertR2上调用onlyRotationMatrixInvert方法
        // 该方法使用转置方式求旋转矩阵的逆,会修改矩阵本身
        invertR2.onlyRotationMatrixInvert();
        // 将tv = [-13.3975,223.205]变换回原来的数值
        v = Matrix2D.transform(invertR2, tv);
        // 此时v肯定是[100,200]
        // alert(v);
    } */
}